<template>
  <div class="file">
    <el-card shadow="never">
      <el-form :inline="true" :model="query">
        <el-form-item label="文件名">
          <el-input v-model="query.search.name"></el-input>
        </el-form-item>
        <el-form-item v-if="false" label="文件路径">
          <el-input v-model="query.search.localPath"></el-input>
        </el-form-item>
        <el-form-item label="文件修改日期">
          <el-date-picker
            v-model="query.search.modified"
            type="daterange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
            value-format="x"
            :shortcuts="shortcuts"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="paginate()" native-type="button">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-divider></el-divider>
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <h3>文件信息</h3>
        </div>
      </template>
      <el-table
        :border="true"
        :data="page.records"
        v-loading="page.loading"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="id" label="#" width="100" />
        <el-table-column prop="name" label="文件名称" width="180" />
        <el-table-column prop="size" label="文件大小" width="120">
          <template #default="scope">
            {{ filesize(scope.row.size) }}
          </template>
        </el-table-column>
        <el-table-column prop="modified" label="文件修改时间" width="200">
          <template #default="scope">
            {{ formatToLocaleString(scope.row.modified) }}
          </template>
        </el-table-column>
        <el-table-column prop="localPath" label="本地路径" width="320" />
        <el-table-column prop="remotePath" label="远程路径" width="320" />
        <el-table-column prop="createdAt" label="添加时间" width="200">
          <template #default="scope">
            {{ formatToLocaleString(scope.row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column prop="updatedAt" label="更新时间" width="200">
          <template #default="scope">
            {{ formatToLocaleString(scope.row.updatedAt) }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px"
        v-model:current-page="query.currentPage"
        v-model:page-size="query.pageSize"
        :page-sizes="[20, 50, 100, 200]"
        :total="page.total"
        @currentChange="paginate()"
        @sizeChange="paginate()"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from 'vue'
import { backendService, ResponseCode } from '@/service/BackendService'
import { formatToLocaleString } from '@/service/DateService'
import { filesize } from 'filesize'

const query = ref({
  currentPage: 1,
  pageSize: 20,
  search: {
    name: undefined,
    localPath: undefined,
    modified: []
  }
})

const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
]

const page = ref({
  loading: false,
  total: 0,
  records: [],
  extra: {}
})

const paginate = () => {
  page.value.loading = true
  backendService
    .post('/api/file', query.value)
    .then((response) => {
      let data = response.data
      if (data.code === ResponseCode.OK) {
        Object.assign(page.value, data.data)
      }
    })
    .catch((error: any) => {
      ElNotification({
        title: 'Error',
        message: error,
        type: 'error',
        dangerouslyUseHTMLString: true
      })
    })
    .finally(() => {
      page.value.loading = false
    })
}

onBeforeMount(() => {
  paginate()
})
</script>
